<template>
	<view class="out">
		<view class="title">
			<image class="logo" src="https://edu-image.nosdn.127.net/53631144025145dc9a8a96d273c4f7d3.png" mode=""></image>
			<view class="center">用APP学习</view>
			<view class="right">打开</view>
		</view>

		<scroll-view class="scroll" scroll-y="true" enable-flex>
			<image class="goodsImg" :src="img" mode=""></image>
			<view class="scrolltitle">
				<view class="item active">简介</view>
				<view class="item">目录</view>
				<view class="item">评价</view>
			</view>

			<view class="particulars">
				<view class="goodsname">{{goodsInfo.description}}</view>
				<view class="evaluate">
					<image class="star" src="https://edu-image.nosdn.127.net/e3a07dfcdea64245962d2fdf690c1f21.png" mode=""></image>
					<view class="grade">4.1分</view>
					<view class="sales">3068人在学</view>
				</view>

				<view class="price">
					<view class="Oldprice">￥{{goodsInfo.price}}</view>
					<view class="Newprice">卷后价:￥{{goodsInfo.price*1-20}}</view>
				</view>
				<view class="vip">
					<view class="vipprice">VIP会员价: ￥{{goodsInfo.price*1*0.8}}</view>
					<view class="buyvip">立即开通></view>
				</view>
			</view>

			<view class="list">
				<view class="listitem">优惠</view>
				<view class="text">减￥20</view>
				<view class="right iconfont icon-jiantou1"></view>
			</view>
			<view class="list">
				<view class="listitem">活动</view>
				<view class="text viptext">【福利中心】抢¥50通用神券、限量会员！</view>
				<view class="right iconfont icon-jiantou1"></view>
			</view>

			<view class="gray"></view>

			<view class="card">
				<view class="cardtitle">
					<view class="sign"></view>
					<view class="cardtext">课程简介</view>
				</view>

				<view class="cardinfo"><image class="cardinfoImg" :src="goodsInfo.bigPhotoUrl" mode=""></image></view>
			</view>
		</scroll-view>

		<view class="buttom">
			<view class="addcar" @click="addtoshopcar">
				<view class="top iconfont icon-gouwuche"></view>
				<view class="bottom"  >加入购物车</view>
			</view>
			<view class="buy">领卷购课</view>
		</view>
	</view>
</template>

<script>
import {mapState} from "vuex"
export default {
	data() {
		return {
			goodsInfo: {},
			img:""
		};
	},
	onLoad: function(option) {
		const eventChannel = this.getOpenerEventChannel();
		eventChannel.on('acceptDataFromOpenerPage', (data)=> {
			this.goodsInfo = data.data[0];
			this.img=data.data[1]
		});
	},
	methods: {
		addtoshopcar(){
			this.goodsInfo.img=this.img
			const isExist =this.shopcardata.find(item=>{
				return item.id===this.goodsInfo.id
			})
			if(!isExist ){
				this.$set(this.goodsInfo,"count",1)
				this.$set(this.goodsInfo,"isChecked",true)
				this.$store.commit("shopcart/SET_SHOPCAR_DATA",this.goodsInfo)
			}else{
				isExist.isChecked = true
				isExist.count += 1
			}
		}
	},
	computed:{
		...mapState("shopcart",["shopcardata"])
	}
};
</script>

<style lang="stylus">
.out
	height 100%
	.title
		height 100rpx
		padding 0 40rpx
		display flex
		align-items center
		box-sizing border-box
		.logo
			height 40rpx
			width 40rpx
			margin-right 10rpx
		.center
			flex 1
			font-size 28rpx
			font-weight 600
		.right
			width 120rpx
			height 56rpx
			font-size 28rpx
			border 2rpx solid #ff3f29
			border-radius 40rpx
			text-align center
			line-height 56rpx
			color #FFFFFF
			background-color #ff3f29
	.scroll
		height calc(100vh - 226rpx)
		.goodsImg
			width 100%
			height 422rpx
		.scrolltitle
			height 92rpx
			border-bottom 1rpx solid #ccc
			box-sizing border-box
			display flex
			justify-content space-around
			.item
				width 144rpx
				height 90rpx
				text-align center
				line-height 90rpx
				&.active
					border-bottom 4rpx solid #ff3f29
		.particulars
			height 250rpx
			padding 30rpx
			.goodsname
				font-size 32rpx
				font-weight 600
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			.evaluate
				height 50rpx
				display flex
				align-items center
				margin-bottom 20rpx
				.star
					height 20rpx
					width 100rpx
				.grade
					font-size 24rpx
					margin 0 20rpx
				.sales
					font-size 20rpx
					color #aaa
			.price
				height 60rpx
				display flex
				align-items center
				.Oldprice
					color #ff3f29
				.Newprice
					width 180rpx
					height 50rpx
					border-radius 30rpx
					background-color #ff632a
					text-align center
					line-height 50rpx
					color #fff
					font-size 24rpx
					margin 20rpx
			.vip
				height 80rpx
				margin-top 20rpx
				/* background-color #007AFF */
				box-sizing border-box
				padding 0 20rpx
				display flex
				justify-content space-between
				align-items center
				border-bottom 2rpx solid #ccc
				.vipprice
					font-size 26rpx
				.buyvip
					font-size 26rpx
					height 44rpx
					width 150rpx
					border-radius 30rpx
					text-align center
					background-color #ff632a
		.list
			height 96rpx
			border-bottom 2rpx solid #ccc
			display flex
			margin 0 30rpx
			align-items center
			.listitem
				font-size 26rpx
				padding 5rpx
				border 1rpx solid #ff632a
				color #ff632a
			.text
				font-size 24rxp
				flex 1
				margin-left 30rpx
			.viptext
				color #ff632a
	.gray
		height 20rpx
		background-color #f2f4f7
	.card
		.cardtitle
			margin-top 30rpx
			height 44rpx
			display flex
			align-items center
			.sign
				width 10rpx
				height 20rpx
				background-color #ff632a
			.cardtext
				margin-left 20rpx
				font-size 28rpx
				font-weight 600
		.cardinfo
			padding 30rpx
			.cardinfoImg
				width 100%
				height 2000rpx
	.buttom
		height 126rpx
		box-sizing border-box
		border-top 2rpx solid #aaa
		padding 15rpx
		display flex
		.addcar
			flex 1
			display flex
			flex-direction column
			align-items center
			.top
				font-size 50rpx
			.bottom
				font-size 28rpx
		.buy
			width 540rpx
			height 90rpx
			border-radius 50rpx
			text-align center
			line-height 90rpx
			background-color #ff632a
			color #fff
</style>
